<template>
  <div>
    <h1>Footer****{{getCount}}</h1>
    <h2>{{getPrice}}</h2>
    <hr>
    <p>电影列表<button @click="getMovie">获取</button></p>
    <ul>
      <li v-for='movie in movieList' :key='movie.tvId'>{{movie.albumName}}</li>
    </ul>

    <h3>我喜欢的电影</h3>
    <ul>
      <li v-for='item in likeMovie' :key='item.tvId'>{{item.albumName}}</li>
    </ul>

    <h4>电影名字3-7</h4>
    <ul>
      <li v-for='movie in setMovie' :key='movie.tvId'>{{movie.albumName}}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapState} from 'vuex'
export default {
    name:'Footer',
    computed:{
        // getCount(){
        //     return this.$store.state.count
        // },
        // getPrice(){
        //     return this.$store.state.price
        // },
        // 简化
        ...mapState('count',{getCount:'count',getPrice:'price'}),

        // movieList(){
        //   return this.$store.state.movieList
        // },
        ...mapState('count',['movieList']),


        // likeMovie(){
        //   return this.$store.getters.myMovieList
        // },

        ...mapGetters('count',{likeMovie:'myMovieList'}),



        setMovie(){
          return this.$store.getters['count/setMovieList']({start:3,end:7})
        }
    },
    methods:{
      getMovie(){
        this.$store.dispatch('count/getMovieList')
      }
    }

}
</script>

<style>

</style>